client/src/enums/bonusEnum.ts (1)

1-6: Consider using explicit string values for enum members.

While numeric enums work, using string values makes the code more maintainable and safer, especially if these values need to be serialized or used in APIs.

 export enum BonusName {
-  WAVE,
-  TIKI,
-  HAMMER,
-  NONE,
+  WAVE = 'WAVE',
+  TIKI = 'TIKI',
+  HAMMER = 'HAMMER',
+  NONE = 'NONE',
 }

client/src/ui/utils.ts (1)

Line range hint 1-7: LGTM! Consider adding documentation.

The implementation correctly combines clsx and tailwind-merge for robust class name handling. This will be useful for managing tutorial UI styling.

Consider adding JSDoc documentation with an example:

+/**
+ * Combines multiple class names and merges Tailwind CSS classes efficiently.
+ * @example
+ * // Basic usage
+ * cn('px-2 py-1', 'bg-blue-500', { 'text-white': true, 'rounded': false })
+ * // => 'px-2 py-1 bg-blue-500 text-white'
+ * 
+ * // Merging conflicting Tailwind classes
+ * cn('px-2 py-1', 'px-4') 
+ * // => 'py-1 px-4'
+ */
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

client/src/ui/containers/Header.tsx (1)

8-10: LGTM! Consider adding JSDoc comments.

The interface is well-defined and follows TypeScript best practices. Consider adding JSDoc comments to document the purpose and usage of the onStartTutorial callback.

+/**
+ * Props for the Header component
+ */
 interface HeaderProps {
+  /** Callback function to initiate the tutorial mode */
   onStartTutorial: () => void;
 }

client/src/hooks/useGame.tsx (2)

Line range hint 8-13: Remove or implement the unused shouldLog parameter.

The shouldLog parameter is defined in the type definition but not used in the implementation. This creates a TypeScript error as required parameters must be used.

Apply this diff to fix the issue:

export const useGame = ({
  gameId,
-}: {
-  gameId: string | undefined;
-  shouldLog: boolean;
+}: { 
+  gameId: string | undefined;
}) => {

If logging is needed for tutorial mode, please implement the logging functionality instead of removing the parameter.

---

Based on the code analysis, I can now provide the final response:

Hook implementation needs tutorial-specific tracking capabilities

The current implementation of useGame hook lacks tutorial-specific features that are needed by the tutorial implementation:

• The tutorial components track game state, progress, and steps but can't access these through the hook
• Tutorial-specific logging for progression tracking is done directly in components
• The hook should provide tutorial state management capabilities

Required changes:

• Add tutorial mode detection and state tracking
• Include tutorial-specific game state validation
• Expose tutorial progression methods

🔗 Analysis chain

Line range hint 15-34: LGTM! Core implementation looks solid.

The hook follows React best practices:

• Proper use of useMemo for memoization
• Clean separation of concerns
• Efficient game entity retrieval

Let's verify if this hook meets the tutorial mode requirements:

---

Let me gather more information about the tutorial implementation to ensure the hook meets all requirements.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if this hook is used in tutorial-related components
# and if logging might be needed for tutorial progression tracking

# Search for tutorial-related files
echo "Searching for tutorial-related files..."
fd -e tsx -e ts tutorial

# Check usage of useGame hook in tutorial components
echo "Checking useGame usage in tutorial components..."
rg -l "useGame" | rg -i "tutorial"

# Look for any logging patterns in tutorial components
echo "Checking existing logging patterns..."
rg "console\.|log\(" | rg -i "tutorial"

Length of output: 1651

---

Script:

#!/bin/bash
# Check the tutorial components implementation to understand game state handling
echo "Checking TutorialComponent implementation..."
cat client/src/ui/modules/TutorialComponent.tsx

# Check Tutorial screen implementation
echo "Checking Tutorial screen implementation..."
cat client/src/ui/screens/Tutorial.tsx

# Look for any game state tracking or progression patterns
echo "Looking for game state patterns in tutorial..."
rg -A 5 "gameState|progress|step" client/src/ui/components/Tutorial

Length of output: 15373

client/src/hooks/useAccountCustom.tsx (2)

9-9: Consider making ACCOUNT_CONNECTOR constant and adding documentation.

While the change to use "burner" as default aligns well with the tutorial mode implementation, consider:

1. Using const instead of let since this appears to be a configuration value
2. Adding JSDoc comments to explain the purpose and impact of this setting

- export let ACCOUNT_CONNECTOR: AccountType = "burner";
+ /** 
+  * Determines the default account type for the application.
+  * - "burner": Used for tutorial mode and off-chain interactions
+  * - "controller": Used for on-chain wallet connections
+  */
+ export const ACCOUNT_CONNECTOR: AccountType = "burner";

---

Line range hint 9-35: LGTM! Architectural decision aligns with tutorial mode requirements.

The switch to using burner accounts as default is a good architectural decision because:

1. It enables off-chain tutorial mode without requiring wallet connection
2. Provides a frictionless onboarding experience for new users
3. The implementation cleanly handles both burner and controller account types
4. Proper error handling is in place for null cases

The code maintains flexibility to switch back to controller accounts when needed.

client/src/dojo/game/types/mode.ts (3)

15-15: Use Title Case for consistency with other mode names.

The mode name "tutorial" should follow the same casing convention as other modes.

-  Tutorial =  "tutorial"
+  Tutorial = "Tutorial Mode"

---

38-39: Consider grouping zero-duration modes together.

For better maintainability, consider grouping the Tutorial case with the None case since both return 0.

    switch (this.value) {
      case ModeType.None:
+      case ModeType.Tutorial:
        return 0;
-      case ModeType.Tutorial:
-        return 0; 
      case ModeType.Normal:

---

63-67: Remove extra blank lines and add JSDoc documentation.

The method implementation is correct, but could benefit from documentation and proper formatting.

-
-
-    public isTutorial(): boolean {
-    return this.value === ModeType.Tutorial;
-  }
+  /**
+   * Checks if the current mode is Tutorial mode
+   * @returns {boolean} True if the mode is Tutorial, false otherwise
+   */
+  public isTutorial(): boolean {
+    return this.value === ModeType.Tutorial;
+  }

client/src/ui/components/TutorialModal.tsx (3)

6-10: Add JSDoc documentation for the interface and props.

While the props are well-typed, adding JSDoc documentation would improve maintainability and developer experience.

+/**
+ * Props for the TutorialModal component
+ */
 interface TutorialModalProps {
+  /** Controls the visibility of the modal */
   isOpen: boolean;
+  /** Callback function when the modal is closed */
   onClose: () => void;
+  /** Callback function to initiate the tutorial */
   onStartTutorial: () => void;
 }

---

11-17: Consider memoizing image assets.

The image assets are recalculated on every render. Consider using useMemo to optimize performance.

 const TutorialModal = ({
   isOpen,
   onClose,
   onStartTutorial,
 }: TutorialModalProps) => {
   const { themeTemplate } = useTheme();
-  const imgAssets = ImageAssets(themeTemplate);
+  const imgAssets = React.useMemo(() => ImageAssets(themeTemplate), [themeTemplate]);

---

48-48: Consider using named export instead of default export.

Named exports are generally preferred for better tree-shaking and explicit imports.

-export default TutorialModal;
+export { TutorialModal };

client/src/ui/containers/GameBonus.tsx (1)

4-5: Remove unused BonusType import.

Since the component has been refactored to use BonusName instead of BonusType, the BonusType import is no longer needed.

-import { BonusType } from "@/dojo/game/types/bonus";
import { BonusName } from "@/enums/bonusEnum";

client/src/ui/components/BonusButton.tsx (1)

17-19: Consider consolidating redundant props

The bonusName and bonus props appear to serve similar purposes. Consider consolidating them into a single prop for better maintainability.

interface BonusButtonProps {
  onClick?: () => void;
  urlImage: string;
  bonusCount: number;
- tooltipText: string; // Ajout d'une nouvelle prop pour le texte du tooltip
- bonusName: BonusName;
- bonus: BonusName;
+ tooltipText: string; // Added new prop for tooltip text
+ selectedBonus: BonusName;
}

Update the component usage accordingly:

- bonus == bonusName
+ selectedBonus === currentBonus // assuming currentBonus is the active bonus

client/src/ui/modules/TutorialComponent.tsx (1)

1-9: Remove unused import and add documentation.

The Game import appears to be unused. Additionally, the interface would benefit from JSDoc documentation for better maintainability.

-import { Game } from '@/dojo/game/models/game';
 import { Block } from '@/dojo/game/models/TutorialGrid';
 import { CubeSlidingTutorial } from '@/dojo/game/models/CubeSlidingTutorial';

+/**
+ * Props for the TutorialComponent
+ * @param tutorial - The tutorial instance managing the game state and progression
+ * @param onEndTutorial - Callback function triggered when the tutorial is completed
+ */
 interface TutorialComponentProps {
   tutorial: CubeSlidingTutorial;
   onEndTutorial: () => void;
 }

client/src/ui/components/DesktopHeader.tsx (2)

31-46: Consider memoizing handler functions.

The tutorial handler functions could benefit from memoization using useCallback to prevent unnecessary rerenders, especially since they're passed as props to child components.

- const handleTutorialOpen = () => {
+ const handleTutorialOpen = useCallback(() => {
    setIsTutorialOpen(true);
- };
+ }, []);

- const handleTutorialClose = () => {
+ const handleTutorialClose = useCallback(() => {
    setIsTutorialOpen(false);
- };
+ }, []);

- const handleStartTutorial = () => {
+ const handleStartTutorial = useCallback(() => {
    handleTutorialClose();
    onStartTutorial();
- };
+ }, [handleTutorialClose, onStartTutorial]);

---

68-77: Add accessibility attributes to the Tutorial button.

The Tutorial button should include ARIA attributes to improve accessibility. Also, consider adding a tooltip to provide more context about the tutorial feature.

 <Button
     variant="outline"
+    aria-label="Open tutorial mode"
+    title="Learn how to play the game"
     onClick={(e) => {
       e.stopPropagation();
       handleTutorialOpen();
     }}
   >
     Tutorial
   </Button>

client/src/dojo/game/models/game.ts (3)

Line range hint 65-65: Avoid hard-coding the buyIn value.

The buyIn value is hard-coded to 100 without explanation. Consider:

1. Making it configurable based on game mode
2. Setting it to 0 for tutorial mode
3. Moving it to constants file

-    this.buyIn = 100; // Set default buy-in of $100
+    this.buyIn = this.mode.isTutorial() ? 0 : DEFAULT_GAME_BUYIN;

---

108-109: Remove unnecessary empty lines.

These consecutive empty lines don't serve any purpose and should be removed.

---

Line range hint 111-122: Update utility methods to handle Tutorial mode.

The utility methods need to account for the new Tutorial mode:

• isOver() might need different logic for tutorial progression
• isPaid() should always return false for tutorials
• getGameModeMultiplier() should handle tutorial scoring differently

   public isPaid(): boolean {
+    if (this.mode.isTutorial()) {
+      return false;
+    }
     return this.mode.price() > 0n;
   }

   public getGameModeMultiplier(): number {
+    if (this.mode.isTutorial()) {
+      return GAME_MODE_TUTORIAL_MULTIPLIER;
+    }
     return this.mode.price() === 0n
       ? GAME_MODE_FREE_MULTIPLIER
       : GAME_MODE_PAID_MULTIPLIER;
   }

client/src/ui/components/TutorialBlock.tsx (4)

5-24: Add JSDoc documentation for the interface and its properties.

While the interface is well-structured, adding JSDoc documentation would improve maintainability and help other developers understand the purpose of each prop.

+/**
+ * Props for the BlockContainer component used in tutorial mode
+ */
 interface BlockProps {
+  /** The block data to render */
   block: Block;
+  /** Size of the grid cell in pixels */
   gridSize: number;
+  /** Whether a transaction is being processed */
   isTxProcessing?: boolean;
   // ... add documentation for other props
 }

---

43-63: Remove console.log statements from production code.

Consider replacing console.log statements with proper logging or removing them entirely for production code.

 const onTransitionStart = () => {
-  console.log("Transition started for block", block);
   onTransitionBlockStart();
   setTransition("Start");
 };

 const handleTransitionEnd = () => {
-  console.log("Transition ended for block", block);
   setTransition("End");
   onTransitionBlockEnd(); 
 };

---

75-105: Consider extracting positioning and transition logic.

The positioning and transition logic could be extracted into separate utility functions or custom hooks for better maintainability and reusability.

+const getBlockStyle = (block: Block, gridSize: number, state: GameState, transitionDuration: number) => ({
+  position: "absolute" as const,
+  top: `${block.y * gridSize + 1}px`,
+  left: `${block.x * gridSize + 1}px`,
+  width: `${block.width * gridSize}px`,
+  height: `${gridSize}px`,
+  transition: [GameState.GRAVITY, GameState.GRAVITY2, GameState.GRAVITY_BONUS].includes(state)
+    ? `top ${transitionDuration / 1000}s linear`
+    : "none",
+  color: "white",
+});

 return (
   <div
     className={`block block-${block.width} ${isTxProcessing ? "cursor-wait" : ""} ${highlightClass} ${isBlockClickable ? 'cursor-pointer' : ''}`}
     ref={ref}
-    style={{
-      position: "absolute",
-      top: `${block.y * gridSize + 1}px`,
-      left: `${block.x * gridSize + 1}px`,
-      width: `${block.width * gridSize}px`,
-      height: `${gridSize}px`,
-      transition:
-        state === GameState.GRAVITY ||
-        state === GameState.GRAVITY2 ||
-        state === GameState.GRAVITY_BONUS
-          ? `top ${transitionDuration / 1000}s linear`
-          : "none",
-      color: "white",
-    }}
+    style={getBlockStyle(block, gridSize, state, transitionDuration)}

---

26-106: Consider memoizing the component for performance.

Since the component might be rendered multiple times in a grid, consider using React.memo to prevent unnecessary re-renders when props haven't changed.

-const BlockContainer: React.FC<BlockProps> = ({
+const BlockContainer: React.FC<BlockProps> = React.memo(({
   // ... props
-});
+}));

client/src/index.css (3)

145-155: Well-implemented highlight class with accessibility considerations!

The .highlight class implementation is well-designed with:

• Appropriate visual emphasis using gold border and glow effect
• Smooth transitions for better user experience
• Proper accessibility support via prefers-reduced-motion

Consider documenting this class in your UI component library or style guide to promote reuse across tutorial-related components.

---

Line range hint 156-183: Remove duplicate animation classes.

The .wiggle, .blink, and .wiggle-blink classes are duplicated in the file. This could lead to confusion and maintenance issues.

Remove one set of these duplicate classes:

.wiggle {
  animation: wiggle 0.2s ease-in-out infinite;
}

.blink {
  animation: blink 0.5s ease-in-out infinite;
}

.wiggle-blink {
  animation:
    wiggle 0.2s ease-in-out infinite,
    blink 0.5s ease-in-out infinite;
}

- .wiggle {
-   animation: wiggle 0.2s ease-in-out infinite;
- }
- 
- .blink {
-   animation: blink 0.5s ease-in-out infinite;
- }
- 
- .wiggle-blink {
-   animation:
-     wiggle 0.2s ease-in-out infinite,
-     blink 0.5s ease-in-out infinite;
- }

---

Line range hint 113-144: Add reduced motion support for animations.

The animation classes should respect user preferences for reduced motion, similar to the .highlight class implementation.

Add media queries for reduced motion:

@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.wiggle {
  animation: wiggle 0.2s ease-in-out infinite;
+ @media (prefers-reduced-motion: reduce) {
+   animation: none;
+ }
}

.blink {
  animation: blink 0.5s ease-in-out infinite;
+ @media (prefers-reduced-motion: reduce) {
+   animation: none;
+ }
}

.wiggle-blink {
  animation: wiggle 0.2s ease-in-out infinite,
            blink 0.5s ease-in-out infinite;
+ @media (prefers-reduced-motion: reduce) {
+   animation: none;
+ }
}

client/src/ui/actions/Start.tsx (1)

Line range hint 30-149: Consider tutorial mode integration in handleClick.

Given the PR's objective to implement a tutorial mode, the handleClick function should potentially handle tutorial mode differently from normal/daily modes (e.g., skip credit checks, use predetermined seeds).

Consider adding a conditional branch for tutorial mode:

const handleClick = useCallback(async () => {
  if (mode === ModeType.Tutorial) {
    // Tutorial-specific logic
    handleGameMode();
    return;
  }
  
  // Existing logic for normal/daily modes
  ...
}, [/* existing dependencies */]);

client/src/ui/components/TreasureChest.tsx (1)

Line range hint 22-171: Consider tutorial mode integration.

Since this PR implements a tutorial mode, consider how this component might need to adapt for tutorial scenarios. For example:

• Should certain features be disabled during tutorials?
• Will tutorial mode need special handling of chest progression?
• Should the UI display additional guidance during tutorials?

client/src/ui/components/GameBoard.tsx (3)

Line range hint 31-57: Consider enhancing GameBoardProps for tutorial mode support

The component currently lacks tutorial mode specific properties. Consider adding tutorial-related props to support guided gameplay features.

 interface GameBoardProps {
   initialGrid: number[][];
   nextLine: number[];
   score: number;
   combo: number;
   maxCombo: number;
   hammerCount: number;
   waveCount: number;
   totemCount: number;
   account: Account | null;
   game: Game;
+  isTutorialMode?: boolean;
+  currentTutorialStep?: number;
+  tutorialHighlight?: {
+    element: string;
+    message: string;
+  };
 }

---

Line range hint 73-106: Enhance bonus handlers with tutorial-specific guidance

The bonus click handlers could be enhanced to provide additional guidance and feedback during tutorial mode.

Example enhancement for the Wave bonus:

 const handleBonusWaveClick = () => {
   if (waveCount === 0) return;
   if (bonus === BonusType.Wave) {
     setBonus(BonusType.None);
     setBonusDescription("");
   } else {
     setBonus(BonusType.Wave);
-    setBonusDescription("Select the line you want to destroy");
+    setBonusDescription(
+      props.isTutorialMode
+        ? "Tutorial: The Wave bonus destroys an entire row! Select any block in the row you want to clear."
+        : "Select the line you want to destroy"
+    );
   }
 };

---

Line range hint 219-308: Add tutorial overlay and guidance system

The render section should include tutorial-specific UI elements to guide players through the game mechanics.

Consider adding:

1. A tutorial overlay component for step-by-step instructions
2. Visual highlights for interactive elements
3. Progress indicators for tutorial steps
4. Conditional rendering of tournament info based on game mode

Example implementation:

// Add before the return statement
const renderTutorialOverlay = () => {
  if (!props.isTutorialMode) return null;
  
  return (
    <TutorialOverlay
      step={props.currentTutorialStep}
      highlightElement={props.tutorialHighlight?.element}
      message={props.tutorialHighlight?.message}
    />
  );
};

// Add within the Card component
{renderTutorialOverlay()}

client/src/ui/screens/Home.tsx (3)

118-125: Consolidate tutorial initialization logic.

handleStartTutorial and startTutorial have overlapping responsibilities, which could lead to maintenance issues.

Consider consolidating these functions:

-const handleStartTutorial = useCallback(() => {
-  setTutorialState({
-    isActive: true,
-    showGrid: true,
-    showText: false,
-  });
-  startTutorial();
-}, [startTutorial]);
+const startTutorial = useCallback(() => {
+  try {
+    setTutorialState({
+      isActive: true,
+      showGrid: true,
+      showText: false,
+      currentStep: 0,
+      completedSteps: new Set(),
+    });
+  } catch (error) {
+    handleError(error);
+  }
+}, []);

---

64-78: Consider decomposing the Home component to reduce complexity.

The component has grown to manage multiple concerns (game state, tutorial state, views, dialogs), making it harder to maintain and test.

Consider:

1. Extract tutorial state management into a custom hook:

const useTutorialState = () => {
  const [tutorialState, setTutorialState] = useState({...});
  const startTutorial = useCallback(() => {...}, []);
  const endTutorial = useCallback(() => {...}, []);
  
  return { tutorialState, startTutorial, endTutorial };
};

2. Extract view rendering logic into separate components:

const GameModeSelector = ({ onModeSelect }) => {...};
const TournamentView = ({ onBack }) => {...};

This would improve maintainability and make the component easier to test.

---

Line range hint 134-170: Improve effect organization and cleanup handling.

The effects are scattered and some cleanup logic might be missed during unmount.

Consider:

1. Grouping related effects together
2. Adding cleanup for all side effects
3. Using a more declarative approach for state updates

 // Game state effects
 useEffect(() => {
   if (game?.over) {
     handleGameOver();
   }
 }, [game?.over]);

 // Tutorial effects
 useEffect(() => {
   if (!tutorialState.isActive) {
     return;
   }
   
   // Setup tutorial
   const cleanup = setupTutorial();
   
   return () => {
     cleanup();
     handleTutorialCleanup();
   };
 }, [tutorialState.isActive]);

client/src/ui/components/Grid.tsx (3)

62-85: Consider removing console logs before production deployment.

The state management improvements look good, but there are debugging console logs that should be removed or replaced with proper logging.

- console.log(
-   `Mouvement effectué : Ligne ${rowIndex}, de ${startColIndex} à ${finalColIndex}`,
- );

---

287-296: Consider optimizing gravity calculations for better performance.

The gravity calculation logic could be optimized in two ways:

1. Memoize calculateFallDistance results to prevent recalculation for unchanged blocks
2. Use array methods that don't create new arrays on every update

+ const memoizedCalculateFallDistance = useCallback(
+   (block: Block, blocks: Block[]) => {
      let maxFall = gridHeight - block.y - 1;
      for (let y = block.y + 1; y < gridHeight; y++) {
        if (isCollision(block.x, y, block.width, blocks, block.id)) {
          maxFall = y - block.y - 1;
          break;
        }
      }
      return maxFall;
+   },
+   [gridHeight]
+ );

Also applies to: 314-333

---

440-482: Consider extracting styles and animations to separate files.

The component contains complex inline styles and animation logic. Consider:

1. Moving styles to a separate CSS module
2. Creating a reusable animation component

+ // styles/Grid.module.css
+ .gridBackground {
+   background-image: linear-gradient(#1E293B 2px, transparent 2px),
+     linear-gradient(to right, #1E293B 2px, #10172A 2px);
+ }
+
+ // components/animations/BounceAnimation.tsx
+ const BounceAnimation: React.FC<{children: React.ReactNode}> = ({children}) => (
+   <motion.div
+     animate={shouldBounce ? { scale: [1, 1.1, 1, 1.1, 1] } : {}}
+     transition={{ duration: 0.2, ease: "easeInOut" }}
+   >
+     {children}
+   </motion.div>
+ );

client/src/ui/screens/Tutorial.tsx (4)

14-14: Remove unused import of set from date-fns.

The imported set function from date-fns is not used in the code. Removing unused imports can help optimize the bundle size and improve code clarity.

Apply this diff:

-import { set } from "date-fns";

---

151-152: Unnecessary rounding of integer grid coordinates.

In the selectBlock function, block.x is already an integer representing the grid coordinate. Using Math.round() is redundant.

Apply this diff to simplify the code:

-          const finalPosition = Math.round(block.x);
+          const finalPosition = block.x;

---

61-63: Improve function naming for better clarity.

The function updateValue updates both the score and the intermission state. Renaming it to something like updateScoreAndIntermission would make its purpose clearer.

---

61-63: Ensure consistent score updates across functions.

Both updateValue and selectBlock functions update the score. To maintain consistency and prevent potential discrepancies, consider centralizing score updates in a single function or state management solution.

client/src/ui/components/TutorialGrid.tsx (2)

269-269: Remove console.log statements from production code

Consider removing or commenting out console.log statements to clean up console output in production environments.

Affected lines:

• Line 269
• Line 273
• Lines 293-295
• Lines 322-324

Also applies to: 273-273, 293-295, 322-324

---

158-158: Clean up commented-out code

There are several blocks of commented-out code. Removing unused code improves readability and reduces clutter.

Affected lines:

• Line 158
• Lines 196-197
• Line 226
• Lines 276-278
• Lines 289-290

Also applies to: 196-197, 226-226, 276-278, 289-290

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Description: Check for mobile-related tutorial implementations
# Expected: No results if tutorial is intentionally desktop-only

# Search for tutorial-related code in mobile components
rg -l "tutorial" --glob "**/*[mM]obile*.{tsx,ts,jsx,js}"

# Search for responsive tutorial-related implementations
rg "useMediaQuery.*tutorial" --type ts

#!/bin/bash
# Let's try a broader search to understand the tutorial implementation

# Check all files containing tutorial-related code
rg -l "tutorial" --type ts --type tsx

# Look for the DesktopHeader and MobileHeader components
rg -A 5 "export.*MobileHeader" --type tsx
rg -A 5 "export.*DesktopHeader" --type tsx

# Search for any tutorial-related props or interfaces
rg "interface.*Props.*tutorial|type.*Props.*tutorial" --type ts --type tsx

#!/bin/bash
# Search without specific file type flags since tsx isn't recognized
# Look for tutorial-related code and components

# Find all TypeScript-like files first
fd "\.(ts|tsx)$" | while read -r file; do
  echo "=== $file ==="
  rg "tutorial" "$file" || true
done

# Look specifically for Mobile/Desktop header components
fd "\.(ts|tsx)$" | while read -r file; do
  echo "=== $file ==="
  rg "(Mobile|Desktop)Header" "$file" || true
done

# Search for Props interfaces/types
fd "\.(ts|tsx)$" | while read -r file; do
  echo "=== $file ==="
  rg "interface.*Props|type.*Props" "$file" || true
done

#!/bin/bash
# Description: Verify TutorialModal integration in parent components

# Test: Check proper prop passing in parent components
echo "Checking TutorialModal usage in parent components..."
rg -A 5 "TutorialModal" --type tsx

# Test: Verify onStartTutorial prop implementation
echo "Checking onStartTutorial implementation..."
ast-grep --pattern 'const $name = $$$; const handleStartTutorial = $_'

#!/bin/bash
# Search for TutorialModal usage with ripgrep
echo "Checking TutorialModal usage..."
rg "TutorialModal" -A 10 -B 2

# Search for files containing TutorialModal
echo -e "\nFiles containing TutorialModal:"
rg "TutorialModal" --files-with-matches

# Find all tsx files that might contain the component
echo -e "\nAll potential tsx/ts files:"
fd "\.(tsx|ts)$"

#!/bin/bash
# Check implementation in DesktopHeader
echo "Checking DesktopHeader implementation..."
rg "handleTutorial|handleStartTutorial|isTutorialOpen" -B 2 -A 5 client/src/ui/components/DesktopHeader.tsx

# Check Tutorial screen implementation
echo -e "\nChecking Tutorial screen implementation..."
rg "onStartTutorial|handleStartTutorial" -B 2 -A 5 client/src/ui/screens/Tutorial.tsx

# Check TutorialComponent implementation
echo -e "\nChecking TutorialComponent implementation..."
rg "onStartTutorial|handleStartTutorial" -B 2 -A 5 client/src/ui/modules/TutorialComponent.tsx

#!/bin/bash
# Description: Find all usages of GameBonus component to verify they're using BonusName
# Expected: All instances should use BonusName values for the bonus prop

# Search for GameBonus component usage
rg -l "GameBonus" | xargs rg -A 5 "<GameBonus"

#!/bin/bash
# Search for the BonusName type definition and its values
rg "BonusName" -A 5

# Search for GameBonusProps interface
ast-grep --pattern 'interface GameBonusProps {
  $$$
}'

#!/bin/bash
# Check for related tutorial implementation files
echo "Checking for related tutorial implementation files..."
fd -e tsx -e ts tutorial

# Look for grid layout definitions
echo "\nChecking for grid layout definitions..."
rg -i "tutorial.*grid.*layout" -A 5

# Check for visual feedback implementations
echo "\nChecking for visual feedback mechanisms..."
rg -i "tutorial.*(feedback|cue|hint)" -A 5

#!/bin/bash
# Let's examine the tutorial-related files more closely

# Check TutorialGrid implementation
echo "=== TutorialGrid.tsx content ==="
cat client/src/ui/components/TutorialGrid.tsx

# Check CubeSlidingTutorial model
echo -e "\n=== Looking for CubeSlidingTutorial implementation ==="
fd -e ts CubeSlidingTutorial

# If found, examine its content
if [ -f "client/src/dojo/game/models/CubeSlidingTutorial.ts" ]; then
    echo -e "\n=== CubeSlidingTutorial.ts content ==="
    cat client/src/dojo/game/models/CubeSlidingTutorial.ts
fi

# Check for tutorial step definitions
echo -e "\n=== Looking for tutorial steps/instructions ==="
rg -i "class.*tutorial" -A 10

#!/bin/bash
# Let's check for tutorial step and progression implementation

# Look for tutorial step definitions and progression logic
echo "=== Checking tutorial step progression ==="
rg -i "tutorialStep|isTutorialComplete" -A 5

# Check for visual feedback in TutorialBlock component
echo -e "\n=== TutorialBlock.tsx content ==="
cat client/src/ui/components/TutorialBlock.tsx

# Look for grid layout initialization
echo -e "\n=== Checking grid initialization ==="
rg -i "getGridState|initialData.*tutorial" -A 5

#!/bin/bash
# Description: Verify tutorial mode integration across components

# Test 1: Check for tutorial-related components and their connections
echo "Checking for tutorial-related components..."
rg -l "Tutorial" --type tsx

# Test 2: Verify onStartTutorial prop usage
echo "Checking onStartTutorial prop usage..."
rg "onStartTutorial" --type tsx

# Test 3: Look for tutorial state management
echo "Checking tutorial state management..."
rg "tutorial.*State|useTutorial" --type tsx

#!/bin/bash
# Description: Verify tutorial mode integration across components

# Test 1: Check for tutorial-related components and their connections
echo "Checking for tutorial-related components..."
rg -l "Tutorial"

# Test 2: Verify onStartTutorial prop usage
echo "Checking onStartTutorial prop usage..."
rg "onStartTutorial" -A 2

# Test 3: Look for tutorial state management
echo "Checking tutorial state management..."
rg "tutorial.*State|useTutorial"

# Test 4: Check for tutorial-related imports and exports
echo "Checking tutorial-related imports and exports..."
rg "import.*Tutorial|export.*Tutorial"

#!/bin/bash
# Check Mode enum implementation
rg -t typescript "enum.*Mode|type.*Mode" -A 5

- // const [showLeaderboard, setShowLeaderboard] = useState(false);
- // const [selectedChest, setSelectedChest] = useState<Chest | null>(null);

- {/* Leaderboard Toggle */}
- {/*<button
-   className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
-   onClick={() => setShowLeaderboard(!showLeaderboard)}
- >
-   {showLeaderboard ? "Hide Leaderboard" : "Show Leaderboard"}
- </button>*/}
-
- {/* Leaderboard Panel */}

client/src/ui/screens/Tutorial.tsx (1)

35-35: Add proper typing for bonus state.

The bonus state should leverage the imported BonusType enum for better type safety.

-  const [bonus, setBonus] = useState<BonusType>(BonusType.None);
+  const [bonus, setBonus] = useState<BonusType | null>(BonusType.None);

client/src/ui/screens/Home.tsx (1)

267-267: Add tutorial availability check to Header.

Consider passing additional props to Header to control tutorial button visibility based on user progress.

-<Header onStartTutorial={handleStartTutorial} />
+<Header 
+  onStartTutorial={handleStartTutorial}
+  showTutorial={!game || game.over}
+  tutorialCompleted={tutorialState.progression.completed}
+/>

client/src/ui/components/TutorialGrid.tsx (3)

21-36: Consider adding JSDoc comments to document the GridProps interface.

While the prop names are self-explanatory, adding JSDoc comments to describe each prop can enhance the interface's readability and maintainability, especially for complex or non-obvious props.

---

75-77: Consider moving constants outside the component.

The borderSize, gravitySpeed, and transitionDuration constants can be moved outside the component since they don't depend on any props or state. This can improve performance by avoiding unnecessary re-creation on each render.

---

181-202: Remove commented-out code.

The commented-out code in the handleMouseDown function should be removed to improve code readability and maintainability. If the code is no longer needed, it's best to remove it entirely.

Configuration used: CodeRabbit UI
Review profile: CHILL